<template>
  <div class="addAccount">
    <el-button
      type="primary"
      size="small"
      @click="dialogFormVisible = true"
    >添加帐号</el-button>
    <el-dialog title="新建帐号" :visible.sync="dialogFormVisible" :before-close="close">
      <el-form :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="帐号" :label-width="formLabelWidth">
              <el-input v-model="form.accountName" auto-complete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="form.accountPassword" auto-complete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="昵称" :label-width="formLabelWidth">
              <el-input v-model="form.accountNick" auto-complete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限" :label-width="formLabelWidth">
              <el-select ref="region" v-model="form.region" placeholder="请选择账号权限" class="regionSelect" @change="currentSel">
                <!-- <el-select ref="region" v-model="form.region" placeholder="请选择账号权限" value-key="id" class="regionSelect" @change="currentSel"> -->
                <!-- <get-power /> -->
                <!-- <el-option label="管理员" value="shanghai" />
                <el-option label="营业员" value="beijing" /> -->
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述" :label-width="formLabelWidth">
              <el-input v-model="form.accountDescription" type="textarea" placeholder="帐号描述" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="headPortrait" label="头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="/muma/user/avatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAccounts">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { numAndWord } from '@/utils/validate.js'
// import GetPower from './getPower'
import { addAccount } from '@/api/table'
export default {
  name: 'AddAccount',
  components: {
    // GetPower
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        accountName: '',
        accountPassword: '',
        accountNick: '',
        accountDescription: ''
      },
      imageUrl: '',
      formLabelWidth: '60px',
      formRegionWidth: '100%'
    }
  },
  methods: {
    // 图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像大小不能超过2MB!')
      }
      return isLt2M
    },
    // 权限下拉
    currentSel(selVal) {
      this.resource = selVal
    },
    addAccounts() {
      const date = {
        accountName: this.form.accountName, // 帐号
        accountPassword: this.form.accountPassword, // 密码
        accountDescription: this.form.description, // 描述
        accountImg: this.imageUrl, // 头像
        accountPower: '管理员', // 权限
        accountNick: this.form.accountNick // 昵称
      }
      console.log(date)
      if (!(numAndWord(date.accountName))) {
        this.$message.error('帐号应为数字和字母组合')
        return false
      }
      if (!(numAndWord(date.accountPassword)) && date.accountPassword.length > 6) {
        this.$message.error('密码应为大于六位的数字或字母组合')
        return false
      }
      if (!(date.accountNick.length >= 2)) {
        this.$message.error('昵称为大于两位的字符组合')
        return false
      }
      if (!(date.accountDescription.length >= 2)) {
        this.$message.error('描述为大于两位的字符组合')
        return false
      }
      this.listLoading = true
      addAccount(date).then(res => {
        if (res.resultCode === '0000') {
          this.dialogFormVisible = false
          this.form = ''
          this.imageUrl = ''
          this.close()
        } else if (res.resultCode === '0007') {
          this.$message.error('帐号名重复')
        }
      })
      this.listLoading = false
    },
    close() {
      const data = 'alter'
      this.dialogFormVisible = false
      this.$emit('closeEdit', data)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .avatar-uploader >>> .el-upload
    border 1px dashed #d9d9d9
    border-radius 6px
    cursor pointer
    position relative
    overflow hidden
  .avatar-uploader >>> .el-upload:hover
    border-color #409EFF
  .addAccount >>> .regionSelect
    width 100%
.addAccount
  padding-left 20px
  padding-top 20px
  .avatar-uploader-icon
    font-size 28px
    color #8c939d
    width 178px
    height 178px
    line-height 178px
    text-align center
  .avatar
    width 178px
    height 178px
    display block
</style>
